<template>
	<view class="p-10">


		<view class="bg-white p-20 " style="padding-bottom: 50px">


			<view   class="p-b-10  a-c" style="flex-wrap: wrap;display: flex;">
				<view class="" style="margin: 10rpx;">
					<uni-easyinput confirm-type="search" @confirm="on_search" v-model="find.name" placeholder="请输入分类名称">
					</uni-easyinput>
				</view>
				<view class="banmi_flex">
					<view style="padding: 0 7rpx;"> <button @click="on_search()" type="primary" size="mini"> 查询
						</button>
					</view>
					<view style="padding: 0 7rpx;"> <button @click="on_search_resetting()" type="primary" size="mini">
							重置 </button>
					</view>
					<view style="padding: 0 7rpx;"> <button @click="on_add()" type="primary" size="mini"> 新增 </button>
					</view>

				</view>
			</view>


			<uni-table   border stripe @selection-change="selectionData">
				<uni-tr>


					<uni-th align="center" >分类名称</uni-th>

					<uni-th align="center" >分类图标</uni-th>

					<uni-th align="center" >创建时间</uni-th>

					<uni-th align="center" >是否启用</uni-th>

					<uni-th align="center" >操作</uni-th>

				</uni-tr>
				<uni-tr v-for="(vo,index) in list" :key="index" v-if="vo.superior_id==0||vo.expand==true"
					:style="vo.superior_id > 0 ? 'background-color: #F5F5F5;' :'' ">
					<uni-td>
						<view class="banmi_flex  a-c m-l-10"
							:class="vo.depth==1?'m-l-10':vo.depth==2?'m-l-20':vo.depth==3?'m-l-30':vo.depth==4?'m-l-40':'' "
							@click="on_tab(index)">
							<view class="" v-if="vo.children.length>0">
								<icon-right v-if="vo.depth_to!=true" size="40" color="#333"></icon-right>
								<icon-down v-else size="40" color="#333"></icon-down>
							</view>
							<text>{{vo.name}}</text>
						</view>
					</uni-td>



					<uni-td align="center" >
						<image class="b_y" @click="on_img(vo.icon)" :src="vo.icon|getImg"
							style="height: 80rpx;width: 100rpx;">
						</image>
					</uni-td>
					<uni-td align="center" >
						{{vo.creation_time|getTime}}
					</uni-td>
					<uni-td align="center">
						<view @click="on_switch_open(index,vo.open)">
							<banmi-switch :is_state="vo.open" is_type='1'></banmi-switch>
						</view>
					</uni-td>
					<uni-td buts="buts">
						<view class="t-c">
							<button @click="on_edit(index)" class="operate_button" type="primary" size="mini">
								编辑
							</button>
						</view>
						<view class="t-c">
							<button @click="on_dels(index)" class="operate_button  "  
								size="mini">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>






		</view>

		<edit ref="component_edit" @confirm="confirm_edit">
		</edit>
		<uni-popup ref="component_dels" type="center">
			<dels :id="id" @confirm="confirm_dels">
			</dels>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getParents,
		patTree,
		getSortMenu,
		onqueryload
	} from '@/common/bmupload/recursion.js'

	import edit from './edit.vue';
	import dels from './dels.vue';

	export default {
		components: {
			edit,
			dels,
		},
		data() {
			return {
				find: {},
				list: [],
				total: 0,
				page: 1,
				id: 0,
				is_top_height: false,
			}
		},
		onLoad(on) {
			this.add_id = 0;
			//无限递归子分类主键
			this.main_id = 'id'; //主键id
			this.association_id = 'superior_id'; //关联id
			this.init();
		},
 
		methods: {
			on_tab(index) {
				var that = this;
				var list = this.list;
				var num = that.list[index]['children'].length
				var id = that.list[index][that.main_id];
				if (num == 0) { //没有二级列表 
					return
				}
				var parent_id = that.list[index][that.main_id]; //我的id
				var expand = that.list[index]['expand'];
				var menu_id = that.list[index][that.association_id]; //我的上级
				var depth = that.list[index]['depth']; //层级

				list[index]['depth_to'] = !list[index]['depth_to'];
				list.forEach(function(item, index, arr) {
					if (item['expand'] == true) { //已展开，闭合
						if (parent_id != item[that.main_id] && item[that.association_id] != menu_id && depth < 2) {
							item['expand'] = false;
						} else {
							if (item[that.association_id] == parent_id) {
								item['expand'] = false;
							}
						}
					} else {
						item['expand'] = item[that.association_id] == parent_id ? true : false;
					}

					if (menu_id == 0 && menu_id != item[that.main_id] && parent_id != item[that.main_id]) {
						item['depth_to'] = false;
					}
					if (item['depth_to'] && menu_id > 0) {
						if (menu_id == item[that.association_id] && parent_id != item[that.main_id]) {
							item['depth_to'] = false;
						}
					}

					arr[index] = item;
				});
				// this.list = list

				// this.$forceUpdate()
			},
			//全选 反选
			selectionData(list) {
				console.log("list: " + JSON.stringify(list));
			},

			on_img(img) {
				if (img.indexOf("http") != -1) {
					return img;
				}
				img = uni.getStorageSync('img_url') + img
				uni.previewImage({
					current: img,
					urls: [img]
				})
			},
			on_switch_open(index, val) {
				var that = this;
				var id = this.list[index]['id'];
				let requestParams = {
					id: id,
				};
				this.Http.post('/banmitongcheng/admin/Articlecategory/switch_open', requestParams).then(ret => {
					this.list[index]['open'] = ret.data
				})
			},
			on_edit(index) {
				this.id = this.list[index]['id'];
				this.$refs.component_edit.init(this.id, this.list)
			},
			confirm_edit() {
				if (this.id == 0) {
					this.page = 1;
				}
				this.init();

			},
			on_dels(index) {
			
				this.id = this.list[index]['id'];
				console.log("this.id: " + JSON.stringify(this.id));
				this.$refs.component_dels.open()
			},
			confirm_dels() {
				this.init();
				this.$refs.component_dels.close()
			},


			getPage(id) {
				this.page = id.current;
				this.init()
			},
			on_add() {
				this.id = 0;
				this.$refs.component_edit.init(0, this.list)
			},
			on_search() {
				this.init();
			},
			on_search_resetting() {
				this.find = {};
				this.page = 1;
				this.init();
			},
			init() {
				var that = this;
				this.find['page'] = this.page
				this.Http.post('banmitongcheng/admin/Articlecategory/lists', this.find).then(ret => {
					var list = ret.data.list.list.data;
					//递归无限子分类
					this.list = onqueryload(list, this.main_id, this.association_id, this.add_id)
				})
			},

		}
	}
</script>

<style>
	.operate_button {
		width: 70px;
	}

	.operate_right {
		position: sticky;
		right: 0;
		z-index: 100;
		background-color: #fff;
	}
</style>